<template>
  <el-container style="height: 100vh;">
    <!-- 左侧菜单栏 -->
    <el-aside width="200px" style="background-color: #2f3a4a; color: #fff;">
      <div class="logo" style="padding: 20px; text-align: center; font-size: 20px; color: #fff;">
        <span>职工管理系统</span>
      </div>
      <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect" background-color="#2f3a4a" text-color="#fff" active-text-color="#409eff">
        <el-menu-item index="1">书籍管理</el-menu-item>
        <el-menu-item index="2">问题管理</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧主内容区域 -->
    <el-main style="background-color: #f5f7fa; padding: 20px;">
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
import { ref, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const activeMenu = ref('1'); // 默认选中书籍管理菜单

    // 校验登录状态
    onBeforeMount(() => {
      const token = localStorage.getItem('token');
      if (!token) {
        // 如果没有 token，跳转到登录页
        router.push('/login');
      }
    });

    // 菜单项点击事件
    const handleMenuSelect = (index) => {
      activeMenu.value = index;
      if (index === '1') {
        router.push('/books'); // 跳转到书籍管理页面
      } else if (index === '2') {
        router.push('/problems'); // 跳转到问题管理页面
      }
    };

    return {
      activeMenu,
      handleMenuSelect
    };
  },
};
</script>

<style scoped>
.el-aside {
  background-color: #2f3a4a;
  color: #fff;
  padding: 0;
}

.el-menu {
  padding: 20px 0;
}

.el-menu-item {
  color: #fff;
}

.el-main {
  padding: 20px;
  background-color: #f5f7fa;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  padding: 20px;
  text-align: center;
}
</style>
